<template>
  <div class="activity-list" :class="{ 'apple-style': appleStyle }">
    <div v-if="appleStyle" class="apple-activity-list">
      <div v-for="activity in normalizedActivities" :key="activity.id" class="apple-activity-item"
        :class="{ 
          'login-activity': isLoginActivity(activity.actionType),
          'unread': !activity.read 
        }">
        <div class="activity-dot" :class="activity.actionType"></div>
        <div class="activity-content">
          <div class="activity-header">
            <h3 class="activity-title">{{ activity.title }}</h3>
            <div class="activity-actions">
            <span class="activity-tag" :class="activity.actionType">
              {{ getActionTypeLabel(activity.actionType) }}
            </span>
              <button v-if="!activity.read" class="mark-read-btn" @click.stop="markAsRead(activity.id)">
                标为已读
              </button>
            </div>
          </div>
          <p class="activity-text">{{ activity.content }}</p>
          <div class="activity-footer">
            <span class="activity-time">{{ formatTime(activity.time) }}</span>
            <div class="activity-details">
              <span class="activity-user" v-if="activity.userName">
                <i class="el-icon-user"></i> {{ activity.userName }}
              </span>
              <span class="activity-location" v-if="activity.locationName && activity.locationName.trim() !== ''">
                <i class="el-icon-location"></i> {{ activity.locationName }}
              </span>
              <span class="activity-item-name" v-if="activity.itemName && activity.itemName.trim() !== ''">
                <i class="el-icon-goods"></i> {{ activity.itemName }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <div v-if="activities.length === 0" class="empty-message-inline">
        暂无活动记录。您可以尝试刷新数据。
      </div>

      <div v-if="activities.length > 5" class="load-more">
        <button class="apple-button" @click="loadMore">加载更多</button>
      </div>
    </div>

    <!-- 保留原始组件实现，以便兼容性 -->
    <el-timeline v-else>
      <el-timeline-item v-for="activity in activities" :key="activity.id" :type="getActionIconType(activity.actionType)"
        :color="getActionColor(activity.actionType)" :timestamp="activity.time">
        <div class="activity-item">
          <div class="activity-header">
            <h3 class="activity-title">{{ activity.title }}</h3>
            <div class="activity-actions">
              <el-tag size="small" :type="getTagType(activity.actionType)">
                {{ getActionTypeLabel(activity.actionType) }}
              </el-tag>
            </div>
          </div>
          <p class="activity-content-text">{{ activity.content }}</p>
          <div class="activity-info">
            <span class="activity-user" v-if="activity.userName">{{ activity.userName }}</span>
            <span class="activity-location" v-if="activity.locationName && activity.locationName.trim() !== ''">
              {{ activity.locationName }}
            </span>
            <span class="activity-item-name" v-if="activity.itemName && activity.itemName.trim() !== ''">
              {{ activity.itemName }}
            </span>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, onMounted, computed } from 'vue'

const props = defineProps({
  activities: {
    type: Array,
    required: true
  },
  appleStyle: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['load-more', 'mark-read'])

onMounted(() => {
  console.log('RecentActivityList组件挂载，活动数据:', props.activities);
})

const normalizedActivities = computed(() => {
  if (!props.activities || props.activities.length === 0) {
    console.log('活动列表为空');
    return [];
  }

  return props.activities.map(activity => {
    console.log('处理活动:', activity);

    // 确保必要的字段都存在
    return {
      ...activity,
      id: activity.id,
      title: activity.title || '未知操作',
      content: activity.content || '',
      actionType: activity.actionType || activity.subType || 'system',
      time: activity.time || activity.createTime || new Date().toISOString(),
      userName: activity.userName || activity.user_name || '系统',
      locationName: activity.locationName || activity.location_name || (isLoginActivity(activity.actionType) ? '' : '未知位置'),
      itemId: activity.itemId || activity.item_id,
      itemName: activity.itemName || activity.item_name || '',
      read: activity.read !== undefined ? activity.read : true
    };
  });
});

// 标记活动为已读
const markAsRead = (id) => {
  if (!id) {
    console.error('消息ID为空，无法标记为已读');
    return;
  }
  console.log('RecentActivityList: 标记消息ID为已读:', id);
  emit('mark-read', id);
};

const isLoginActivity = (type) => {
  return ['login', 'logout', 'permission'].includes(type);
};

const formatTime = (timeString) => {
  if (!timeString) return '';

  try {
    // 尝试将ISO格式转换为更友好的本地时间格式
    const date = new Date(timeString);
    if (isNaN(date.getTime())) {
      // 如果转换失败，说明可能不是ISO格式，直接返回原始字符串
      return timeString;
    }

    // 返回格式化的日期时间
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  } catch (e) {
    console.error('日期格式化错误:', e);
    return timeString; // 出错时返回原始字符串
  }
};

const getActionIconType = (type) => {
  switch (type) {
    case 'create':
      return 'success'
    case 'update':
      return 'info'
    case 'delete':
      return 'danger'
    case 'move':
      return 'warning'
    case 'login':
      return 'primary'
    case 'logout':
      return 'info'
    case 'permission':
      return 'warning'
    default:
      return 'info'
  }
}

const getActionColor = (type) => {
  switch (type) {
    case 'create':
      return '#67C23A'
    case 'update':
      return '#409EFF'
    case 'delete':
      return '#F56C6C'
    case 'move':
      return '#E6A23C'
    case 'login':
      return '#5AC8FA'
    case 'logout':
      return '#BF5AF2'
    case 'permission':
      return '#FF9500'
    default:
      return '#909399'
  }
}

const getTagType = (type) => {
  switch (type) {
    case 'create':
      return 'success'
    case 'update':
      return 'info'
    case 'delete':
      return 'danger'
    case 'move':
      return 'warning'
    case 'login':
      return 'primary'
    case 'logout':
      return 'info'
    case 'permission':
      return 'warning'
    default:
      return ''
  }
}

const getActionTypeLabel = (type) => {
  switch (type) {
    case 'create':
      return '新增'
    case 'update':
      return '更新'
    case 'delete':
      return '删除'
    case 'move':
      return '移动'
    case 'login':
      return '登录'
    case 'logout':
      return '登出'
    case 'permission':
      return '权限'
    case 'system':
      return '系统'
    case 'inventory':
      return '库存'
    case 'expiry':
      return '过期'
    case 'updates':
      return '更新'
    default:
      return '其他'
  }
}

const loadMore = () => {
  emit('load-more')
}
</script>

<style scoped>
/* 原始样式 */
.activity-list {
  padding: 10px 0;
}

.activity-item {
  padding: 10px;
  border-radius: 6px;
  background-color: var(--el-fill-color-light);
  border-left: 3px solid var(--el-color-primary);
  transition: all 0.3s;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.activity-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.activity-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.activity-content-text {
  margin: 0;
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-bottom: 8px;
}

.activity-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.load-more {
  text-align: center;
  margin-top: 20px;
}

/* 苹果设计风格 */
.apple-activity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apple-activity-item {
  display: flex;
  padding: 16px;
  border-radius: 14px;
  background-color: var(--apple-card-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: float-up 0.5s ease forwards;
  opacity: 0;
  transform: translateY(10px);
  border: 1px solid var(--apple-border-light);
}

.dark-mode .apple-activity-item {
  background-color: var(--apple-card-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--apple-border-dark);
}

@keyframes float-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.apple-activity-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.dark-mode .apple-activity-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 14px;
  margin-top: 5px;
  flex-shrink: 0;
}

.activity-dot.create {
  background-color: #34C759;
}

.dark-mode .activity-dot.create {
  background-color: #30D158;
}

.activity-dot.update {
  background-color: #007AFF;
}

.dark-mode .activity-dot.update {
  background-color: #0A84FF;
}

.activity-dot.delete {
  background-color: #FF3B30;
}

.dark-mode .activity-dot.delete {
  background-color: #FF453A;
}

.activity-dot.move {
  background-color: #FF9500;
}

.dark-mode .activity-dot.move {
  background-color: #FF9F0A;
}

.activity-dot.login {
  background-color: #5AC8FA;
}

.dark-mode .activity-dot.login {
  background-color: #64D2FF;
}

.activity-dot.logout {
  background-color: #BF5AF2;
}

.dark-mode .activity-dot.logout {
  background-color: #C377FF;
}

.activity-dot.permission {
  background-color: #FF9500;
}

.dark-mode .activity-dot.permission {
  background-color: #FF9F0A;
}

.activity-dot.system {
  background-color: #34C759;
}

.dark-mode .activity-dot.system {
  background-color: #30D158;
}

.activity-dot.inventory {
  background-color: #007AFF;
}

.dark-mode .activity-dot.inventory {
  background-color: #0A84FF;
}

.activity-dot.expiry {
  background-color: #FF9500;
}

.dark-mode .activity-dot.expiry {
  background-color: #FF9F0A;
}

.activity-dot.updates {
  background-color: #5856D6;
}

.dark-mode .activity-dot.updates {
  background-color: #5E5CE6;
}

.activity-content {
  flex: 1;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.activity-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--apple-text-primary-light);
}

.dark-mode .activity-title {
  color: var(--apple-text-primary-dark);
}

.activity-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.activity-tag.create {
  background-color: rgba(52, 199, 89, 0.1);
  color: #34C759;
}

.dark-mode .activity-tag.create {
  background-color: rgba(48, 209, 88, 0.2);
  color: #30D158;
}

.activity-tag.update {
  background-color: rgba(0, 122, 255, 0.1);
  color: #007AFF;
}

.dark-mode .activity-tag.update {
  background-color: rgba(10, 132, 255, 0.2);
  color: #0A84FF;
}

.activity-tag.delete {
  background-color: rgba(255, 59, 48, 0.1);
  color: #FF3B30;
}

.dark-mode .activity-tag.delete {
  background-color: rgba(255, 69, 58, 0.2);
  color: #FF453A;
}

.activity-tag.move {
  background-color: rgba(255, 149, 0, 0.1);
  color: #FF9500;
}

.dark-mode .activity-tag.move {
  background-color: rgba(255, 159, 10, 0.2);
  color: #FF9F0A;
}

.activity-tag.login {
  background-color: rgba(90, 200, 250, 0.1);
  color: #5AC8FA;
}

.dark-mode .activity-tag.login {
  background-color: rgba(100, 210, 255, 0.2);
  color: #64D2FF;
}

.activity-tag.logout {
  background-color: rgba(191, 90, 242, 0.1);
  color: #BF5AF2;
}

.dark-mode .activity-tag.logout {
  background-color: rgba(195, 119, 255, 0.2);
  color: #C377FF;
}

.activity-tag.permission {
  background-color: rgba(255, 149, 0, 0.1);
  color: #FF9500;
}

.dark-mode .activity-tag.permission {
  background-color: rgba(255, 159, 10, 0.2);
  color: #FF9F0A;
}

.activity-tag.system {
  background-color: rgba(52, 199, 89, 0.1);
  color: #34C759;
}

.dark-mode .activity-tag.system {
  background-color: rgba(48, 209, 88, 0.2);
  color: #30D158;
}

.activity-tag.inventory {
  background-color: rgba(0, 122, 255, 0.1);
  color: #007AFF;
}

.dark-mode .activity-tag.inventory {
  background-color: rgba(10, 132, 255, 0.2);
  color: #0A84FF;
}

.activity-tag.expiry {
  background-color: rgba(255, 149, 0, 0.1);
  color: #FF9500;
}

.dark-mode .activity-tag.expiry {
  background-color: rgba(255, 159, 10, 0.2);
  color: #FF9F0A;
}

.activity-tag.updates {
  background-color: rgba(88, 86, 214, 0.1);
  color: #5856D6;
}

.dark-mode .activity-tag.updates {
  background-color: rgba(94, 92, 230, 0.2);
  color: #5E5CE6;
}

.activity-text {
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--apple-text-secondary-light);
}

.dark-mode .activity-text {
  color: var(--apple-text-secondary-dark);
}

.activity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--apple-text-secondary-light);
}

.dark-mode .activity-footer {
  color: var(--apple-text-secondary-dark);
}

.activity-time {
  font-weight: 500;
}

.activity-details {
  display: flex;
  gap: 12px;
}

.activity-user, .activity-location, .activity-item-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.apple-button {
  background-color: var(--apple-button-light);
  color: var(--apple-text-primary-light);
  border: none;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.dark-mode .apple-button {
  background-color: var(--apple-button-dark);
  color: var(--apple-text-primary-dark);
}

.apple-button:hover {
  background-color: var(--apple-button-light-hover);
  transform: translateY(-1px);
}

.dark-mode .apple-button:hover {
  background-color: var(--apple-button-dark-hover);
}

@media (max-width: 768px) {
  .activity-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .activity-tag {
    align-self: flex-start;
  }

  .activity-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}

/* 为每个活动项添加延迟动画 */
.apple-activity-item:nth-child(1) {
  animation-delay: 0.05s;
}

.apple-activity-item:nth-child(2) {
  animation-delay: 0.1s;
}

.apple-activity-item:nth-child(3) {
  animation-delay: 0.15s;
}

.apple-activity-item:nth-child(4) {
  animation-delay: 0.2s;
}

.apple-activity-item:nth-child(5) {
  animation-delay: 0.25s;
}

.apple-activity-item:nth-child(6) {
  animation-delay: 0.3s;
}

.apple-activity-item:nth-child(7) {
  animation-delay: 0.35s;
}

.apple-activity-item:nth-child(8) {
  animation-delay: 0.4s;
}

.apple-activity-item:nth-child(9) {
  animation-delay: 0.45s;
}

.apple-activity-item:nth-child(10) {
  animation-delay: 0.5s;
}

.empty-message-inline {
  padding: 20px;
  text-align: center;
  color: var(--apple-text-secondary-light);
  font-style: italic;
}

.dark-mode .empty-message-inline {
  color: var(--apple-text-secondary-dark);
}

/* 登录活动特殊样式 */
.login-activity {
  border-left: 3px solid #5AC8FA !important;
}

.dark-mode .login-activity {
  border-left: 3px solid #64D2FF !important;
}

/* 未读消息样式 */
.apple-activity-item.unread {
  background-color: rgba(0, 122, 255, 0.05);
  border-left: 3px solid #007AFF;
}

.dark-mode .apple-activity-item.unread {
  background-color: rgba(10, 132, 255, 0.1);
  border-left: 3px solid #0A84FF;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.activity-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mark-read-btn {
  background: none;
  border: none;
  color: #007AFF;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
}

.mark-read-btn:hover {
  background-color: rgba(0, 122, 255, 0.1);
}

.dark-mode .mark-read-btn {
  color: #0A84FF;
}

.dark-mode .mark-read-btn:hover {
  background-color: rgba(10, 132, 255, 0.2);
}
</style>